import React, { useEffect, useState } from 'react';
import { Button, Input, Radio, InputNumber, Form, Space, Tabs } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
//组件
import LineBox from '@/components/LineBox'
import ModalLay from '@/components/ModalLay'
import FormLay from '@/components/FormLay'
import ImageCard from '@/components/ImageCard/ImageCard'
import './goodsCate.scss'
function GoodsCate(props) {
    //定义状态
    let [addShow, setAddshow] = useState(false);
    //接收选择的图片
    let [cImage, setCimage] = useState([])
    let [add, setAdd] = useState({
        name: "黑哥",
        icon: "",
        sort: "",
        status: 1
    });
    let [checkAddCom, setCheckAddCom] = useState(false)
    //获取表单对象
    let [form] = Form.useForm();

    //添加form
    let addConfig = [
        {
            label: "上级分类",
            name: "type",
            ele: Input
        }, {
            label: "分类名称",
            name: "name",
            ele: (_, key) => <Input allowClear />,
            rules: [
                {
                    required: true,
                    message: "分类名称必填！"
                }
            ]
        },
        {
            label: "图标",
            name: "icon",
            ele: () => {
                return <ImageCard onChooseImage={(image) => {
                    form.setFieldValue('icon', image);
                }}></ImageCard>
            },
            rules: [
                {
                    required: true,
                    message: "图标必选！"
                }
            ]
        },
        {
            label: "排序",
            name: "sort",
            ele: InputNumber,
            rules: [
                {
                    required: true,
                    message: "排序必填！"
                }
            ]
        },
        {
            label: "状态",
            name: "status",
            ele: (_, key) => {
                return (
                    <Radio.Group value={_[key]}>
                        <Radio value={1}>显示</Radio>
                        <Radio value={2}>隐藏</Radio>
                    </Radio.Group>
                )
            },
            rules: [
                {
                    required: true,
                    message: "状态必填！"
                }
            ]
        }
    ]
    //添加模态框
    let addHanlder = () => {
        setAddshow(true);
    }
    //添加模态框关闭业务
    let closeModal = async (args) => {
        if (args == 'ok') {
            try {
                let values = await form.validateFields()
                console.log("表单校验", values);
            }
            catch (error) {
                console.log(error);
                return;
            }
        }
        setAddshow(false);
    }

    const items = [
        {
            key: '1',
            label: 'Tab 1',
            children: <div>1111</div>,
        },
        {
            key: '2',
            label: 'Tab 2',
            children: 'Content of Tab Pane 2',
        },
        {
            key: '3',
            label: 'Tab 3',
            children: 'Content of Tab Pane 3',
        },
    ];
    //根据条件检测返回不同模板
    if (!checkAddCom) {
        return (
            <>
                <div className='goodsCate'>
                    商品分类
                    <LineBox>
                        <Space >
                            <Button type="primary" onClick={() => setCheckAddCom(true)} icon={<PlusOutlined />}>
                                添加商品
                            </Button>
                            <Button type="primary" onClick={addHanlder} icon={<PlusOutlined />}>
                                添加顶级分类
                            </Button>
                        </Space>
                    </LineBox>
                </div>
                {/* 添加模态框 */}
                <ModalLay title='新增分类' isModalOpen={addShow} onCloseModal={closeModal} onOkModal={closeModal.bind(null, 'ok')}>
                    <FormLay form={form} initial={add} fromConfig={addConfig}></FormLay>
                </ModalLay>
            </>
        );
    }
    else {
        return (
            <>
                <Button type="primary" onClick={() => setCheckAddCom(false)} icon={<PlusOutlined />}>
                    返回
                </Button>
                商品添加
                <Tabs defaultActiveKey="1" items={items} />
            </>
        )
    }
}

export default GoodsCate;